import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:yjl_flutter_test/flutter/views/custom_date_picker.dart';

class ListWheelViewPortDemo extends StatefulWidget {
  const ListWheelViewPortDemo({Key? key}) : super(key: key);

  @override
  State<ListWheelViewPortDemo> createState() => _ListWheelViewPortDemoState();
}

class _ListWheelViewPortDemoState extends State<ListWheelViewPortDemo> {
  List<Color> data = [];

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < 20; i++) {
      data.add(Color.fromRGBO(Random().nextInt(256), Random().nextInt(256),
          Random().nextInt(256), 1));
    }
    print('>> initState');
  }

  @override
  Widget build(BuildContext context) {
    print('>> build');
    return MaterialApp(
      title: "list wheel test",
      home: Scaffold(
        appBar: AppBar(title: Text('list wheel')),
        body: Container(
          color: Colors.grey,
          height: 250,
          width: 320,
          // child: Scrollable(
          //     viewportBuilder: (BuildContext context, ViewportOffset position) {
          //   return ListWheelViewport(
          //     itemExtent: 50,
          //     offset: position,
          //     childDelegate: ListWheelChildLoopingListDelegate(
          //       children: data.map((e) => _buildItem(e)).toList(),
          //     ),
          //   );
          // }),
          child: CustomDatePicker(
            timeCallback: (str) {},
          ),
        ),
      ),
    );
  }

  Widget _buildItem(Color color) => Container(
        color: color,
        alignment: Alignment.center,
        child: Text(
          colorString(color),
          style: TextStyle(color: Colors.white, shadows: [
            Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
          ]),
        ),
      );

  String colorString(Color color) =>
      '#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}';
}
